<template>
    <div class="audit-container">
        <!-- <div class="audit-header">“营销名称”营销审核</div> -->
        <div class="audit-info">
            <div class="audit-item">申请人：{{detail.addUser}}</div>
            <div class="audit-item">营销方式：{{detail.yxTypeName}}</div>
            <div class="audit-item">是否群体营销：{{detail.is_qt_yx === 1 ? '群体发送方案' : '独立发送方案'}}</div>
            <div class="audit-item" v-show="detail.is_qt_yx === 1">用户群体：{{detail.accName}}</div>
            <div v-show="detail.yx_type_id === 1">
                <div class="audit-item">营销奖励种类：{{detail.yx_type_id === 1 ? '加息券' : detail.yx_type_id === 2 ? '现金券' : '话费券' }}</div>
                <div class="audit-item">奖励内容：<span v-for="(i,idx) in detail.jlname" :key="idx">{{i}} </span></div>
                <div class="audit-item">营销通知种类：{{detail.push_type_id === 1 ? '短信' : detail.push_type_id === 2 ? '邮件' : detail.push_type_id === 3 ? 'app' : '站内信'}}</div>
                <div class="audit-item">通知内容：{{detail.title}}</div>
            </div>
            <div v-show="detail.yx_type_id === 2">
                <div class="audit-item">营销奖励种类：{{detail.yx_type_id === 1 ? '加息券' : detail.yx_type_id === 2 ? '现金券' : '话费券' }}</div>
                <div class="audit-item">奖励内容：<span v-for="(items,index) in detail.jlname" :key="index">{{items}}</span></div>
                <div class="audit-item">营销通知种类：无</div>
                <div class="audit-item">通知内容：无</div>
            </div>
            <div v-show="detail.yx_type_id === 3">
                <div class="audit-item">营销奖励种类：无</div>
                <div class="audit-item">奖励内容：无</div>
                <div class="audit-item">营销通知种类：{{detail.push_type_id === 1 ? '短信' : detail.push_type_id === 2 ? '邮件' : detail.push_type_id === 3 ? 'app' : '站内信'}}</div>
                <div class="audit-item">通知内容：{{detail.title}}</div>
            </div>
            <div v-show="detail.is_qt_yx !== 1">
                <div class="audit-item">预期用户群体总数：{{detail.counts}}</div>
                <div class="audit-item">预期总成本：{{detail.yqzcb}}元</div>
            </div>
            <div class="audit-item">营销时间：{{detail.start_time}}至{{detail.end_time}}</div>
            <div class="audit-item">已审核人：
                <span class="shr" v-for="(item,index) in detail.audit" :key="index" :class="item.status === 0 ? 'gray':''">{{index === detail.audit.length - 1 ?  item.username : item.username + '->'}}</span>
            </div>
        </div>
        <!-- <div class="no-data">暂无记录</div> -->
        <div class="btn-wrap" v-show="issh === 'true'">
            <div class="operate-btn" v-show="Number(status) === 1 || Number(status) === 2">
                <div v-show="detail.userid == userId"  class="ty-wrap">
                    <div class="agree" @click="clickOperate(0)" >同意<div class="device-line"></div></div>
                    <div class="reject" @click="clickOperate(1)">拒绝</div>
                </div>
                <div v-show="detail.userid != userId">
                    <div class="status-btn grayback">{{Number(status) === 1 ? '待审核' : '审核中'}}</div>
                </div>
            </div>
            <div v-show="Number(status) === 3">
                <div class="status-btn" v-show="detail.sxpush == userId" @click="clicksx">生效</div>
                <div class="status-btn grayback" v-show="detail.sxpush != userId">已通过</div>
            </div>
            <!-- <div class="status-btn"  v-show="Number(status) === 3" @click="clicksx">生效</div> -->
            <div class="status-btn grayback"  v-show="Number(status) === 4">已拒绝</div>
            <div class="status-btn grayback"  v-show="Number(status) === 5">已生效</div>
        </div>
        <div class="btn-wrap" v-show="issh === 'false'">
           <div class="status-btn grayback">{{Number(status) === 1 ? '待审核' : Number(status) === 2 ? '审核中' : Number(status) === 3 ? '已通过' : Number(status) === 4 ? '已拒绝' : '已生效'}}</div>
        </div>
        <!-- loading -->
        <div v-transfer-dom>
            <loading :show="showloading" text="数据加载中"></loading>
        </div>
    </div>
</template>
<script>
import { Loading, TransferDomDirective as TransferDom } from "vux";
export default {
  data() {
      return {
          type: 0,  // 0 操作按钮，1 状态按钮
          detail: {},
        //   operateClick: false, // 防止多次点击
          status: '',
          yxId: this.getString('yxId') || this.$route.query.yxId,
          userId: this.getString('shrId') || this.$route.query.shrId,
          issh: this.getString('issh') || this.$route.query.issh, // true 显示按钮 false 显示状态
          showloading: false
      }
  },
  components: {
    Loading
  },
  directives: {
    TransferDom
  },
  methods: {
    getString(name) {
        var urlparams = window.location.hash.replace("#/?","&");
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = urlparams.substr(1).match(reg);
        if (r != null) return r[2];
        return null;
    },
    showLoading() {
      this.showloading = true;
    },
    hideLoading() {
      this.showloading = false;
    },
    async getDetail() { // 详情展示
        let {data} = await this.$post(
            this,{
              api:'/yxInfoDateil',
              data: {
                yxId: this.yxId
              }
            }
          );      
        if (data.code === 200) {
         this.detail = data.data
         console.log(1111,this.detail.sxpush)
         this.status = data.data.status
        //  console.log(this.status)
        } else {
            this.$vux.toast.show({type:'warn',text:data.message})
        }
    },
    clickOperate(operateType) { // 点击同意拒绝操作
        var that = this
        this.$vux.confirm.show({
            content: '确定当前操作？',
            onCancel () {
            
            },
            onConfirm () {
                console.log('operateType',operateType)
                that.showLoading()
                that.operating(operateType)
            }
        })
    },
    async operating(operateType) { // 同意拒绝操作接口 
        let {data} = await this.$post(
            this,{
              api:'/auditYxInfoByPhone',
              data: {
                yxId: this.yxId,
                type: operateType,
                userId: this.userId
              }
            }
          );      
        if (data.code === 200) {
            this.getDetail()
            this.hideLoading()
        } else {
             this.$vux.toast.show({type:'warn',text:data.message})
        }
    },
    clicksx() { //点击生效
        var that = this
        this.$vux.confirm.show({
            content: '确定当前操作？',
            onCancel () {
            
            },
            onConfirm () {
                that.showLoading()
                that.clickEffect()
            }
        })
    },
    async clickEffect() { //生效操作
        let {data} = await this.$post(
            this,{
              api:'/sxYxInfo',
              data: {
                yxId: this.yxId,
                Authorization: this.token
              }
            }
          );      
        if (data.code === 200) {
            console.log(data) 
            this.getDetail() 
            this.hideLoading()
        } else {
            this.$vux.toast.show({type:'warn',text:data.message})
        }
    }
  },
  mounted () {
      this.getDetail()
    //   console.log('userId:',this.userId)
    //   console.log(this.detail.sxpush)
    //   console.log('营销yxId:',this.yxId)
    //   console.log('是否审核：',this.issh)
      
  }

}
</script>
<style lang="scss" scoped>
@import '../../style/variable.scss';
// .audit-header {
//     width: 100%;
//     height: Px(100);
//     line-height: Px(100);
//     font-size: Px(28);
//     text-align: center;
//     border-bottom: 1px solid #999;
// }
.audit-info {
    margin: Px(30) auto;
    overflow: hidden;
    width: Px(680);
    .audit-item {
        font-size: Px(28);
        margin-bottom: Px(30);
        .shr {
            color: #0099CC;
        }
    }
}
.btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0 ;
    width: 100%;
    height: Px(100);
    // border-top: 1px solid #999;
    font-size: Px(28);
    background: #03A9F4;
    color: #fff;
    .operate-btn {
        overflow: hidden;
    }
    .operate-btn .ty-wrap{  
        .agree {
            float: left;
            position: relative;
            width: 50%;
            text-align: center;
            line-height: Px(100);
            .device-line {
                position: absolute;
                top: Px(20);
                right: 0;
                width: 1px;
                height: Px(60);
                background: #fff;  
            }
        }
        .reject {
            float: left;
            width: 50%;
            text-align: center;
            line-height: Px(100);
        }
        .device-line {
            position: absolute;
            top: Px(20);
            right: 0;
            width: 1px;
            height: Px(60);
            background: #fff;  
        }
    }
    .status-btn {
        width: 100%;
        text-align: center;
        line-height: Px(100);
        height: Px(100);
    }
}
.redcolor {
    color: red;
    
}
.bluecolor {
    color: #0099CC;
}
.gray {
    color: #C9C9C9!important;
}
.grayback {
    background: #C9C9C9;
}
.no-data {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    width: 100%;
    font-size: Px(28);
}
</style>
<style lang="scss">
@import '../../style/variable.scss';
.weui-dialog__bd {
    font-size: Px(34)!important;
}
</style>


